<template>
  <el-header class="header">
    <div class="logoBox" @click="$router.push('/')">
      <img src="../assets/logo.png" alt=""/>
      <h1>互开组件库</h1>
      <span v-if="title">{{ title }}</span>
    </div>
    <ul class="nav">
      <router-link to="/" tag="li" active-class="active" exact
      >首页
      </router-link
      >

      <router-link to="/database" v-if="isToken" tag="li" active-class="active"
      >数据库
      </router-link
      >
      <li v-else @click="toLogin()">
        数据库
      </li>

      <router-link to="/project" v-if="isToken" tag="li" active-class="active"
      >接口
      </router-link
      >
      <li v-else @click="toLogin()">
        接口
      </li>
      <router-link v-if="isToken" to="/front" tag="li" active-class="active"
      >前端
      </router-link
      >
      <li v-else @click="toLogin()">
        前端
      </li>

      <router-link v-if="isToken" to="/generator" tag="li" active-class="active"
      >代码生成
      </router-link
      >
      <li v-else @click="toLogin()">
        代码生成
      </li>

      <router-link to="/doc" tag="li" active-class="active">文档</router-link>
      <router-link to="/plan" tag="li" active-class="active">计划</router-link>
    </ul>
    <div class="navicon" @click="opennav">
      <div class="icon"></div>
    </div>
    <div class="infoBox" v-if="isToken">
      <span>{{ userInfo.name }}</span>
      <el-dropdown
          class="avatar-container right-menu-item hover-effect"
          trigger="click"
      >
        <div class="avatar-wrapper">
          <el-avatar :size="40" :src="userInfo.avatar" alt=""></el-avatar>
          <i class="el-icon-caret-bottom"/>
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/profile"></router-link>
          <router-link v-if="isToken" to="/profile"
          >
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link
          >
          <el-dropdown-item>
            <span style="display:block;" @click="logout"> 退 出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div v-else class="infoBox">
      <el-button @click="dialogTableVisible = true">登录</el-button>
    </div>
    <ul class="nav-column" v-show="navflag">
      <li>项目</li>
      <li>数据库</li>
      <li>生成工具</li>
      <li>文档</li>
    </ul>
    <el-dialog title="登录" width="450px" :visible.sync="dialogTableVisible">
      <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          autocomplete="on"
          label-position="left"
      >
        <el-form-item prop="username">
          <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="Username"
              name="username"
              type="text"
              tabindex="1"
              autocomplete="on"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
              key="password"
              ref="password"
              v-model="loginForm.password"
              type="password"
              placeholder="Password"
              name="password"
              tabindex="2"
              autocomplete="on"
          />
        </el-form-item>

        <el-button type="" @click.prevent="handleLogin"> 登录</el-button>
        <el-button type="" @click.prevent="thirdLogin"> Gitee登录</el-button>
      </el-form>
    </el-dialog>
  </el-header>
</template>

<script>
import {getCookies, setCookies, removeCookies} from "@/utils/cookies-util.js";

export default {
  props: ["title"],
  data() {
    return {
      dialogTableVisible: false,
      loginForm: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [{required: true, trigger: "blur", message: "请输入账号"}],
        password: [{required: true, trigger: "blur", message: "请输入密码"}]
      },
      navflag: false
    };
  },
  computed: {
    isToken() {
      return getCookies("Authorization") != null;
    },
    userInfo() {
      return JSON.parse(getCookies("userInfo") || "");
    }
  },
  methods: {
    toLogin() {
      this.dialogTableVisible = true;
    },
    logout() {
      removeCookies("Authorization");
      location.reload();
    },
    thirdLogin() {

    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;

        } else {
          console.log("login 参数错误");
          return false;
        }
      });
    },
    opennav() {
      this.navflag = !this.navflag;
    }
  }
};
</script>

<style lang="less" scoped>
@media (max-width: 959px) {
  .header {
    .nav {
      display: none;
    }

    .navicon {
      display: block;
    }
  }
}

@media (min-width: 960px) and (max-width: 1200px) {
  .header {
    max-width: 1200px;

    .nav {
      display: block;
    }

    .navicon {
      display: none;
    }

    .nav-column {
      display: none;
    }
  }
}

@media (min-width: 1201px) {
  .header {
    width: 100%;

    .nav {
      display: block;
    }

    .navicon {
      display: none;
    }

    .nav-column {
      display: none;
    }
  }
}

.header {
  background: -webkit-linear-gradient(top, #ffffff, #ebf6fe);
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .infoBox {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    & > span {
      margin-right: 10px;
    }
  }

  .nav {
    li {
      display: inline-block;
      margin: 0 14px;
      color: #333;
      font-weight: 600;
      font-size: 15px;
      line-height: 60px;
      position: relative;
      cursor: pointer;

      &::after {
        content: "";
        position: absolute;
        width: 0%;
        height: 3px;
        background: #333;
        left: 0;
        bottom: 5px;
        transition: all 0.4s ease-out 0s;
      }

      &.active,
      &:hover {
        &::after {
          width: 100%;
        }
      }
    }
  }

  .navicon {
    height: 15px;

    .icon {
      width: 30px;
      height: 3px;
      background: #333;
      margin-left: 14px;
      position: relative;
      cursor: pointer;

      &::after {
        content: "";
        width: 30px;
        height: 3px;
        background: #333;
        position: absolute;
        left: 0;
        top: 6px;
      }

      &::before {
        content: "";
        width: 30px;
        height: 3px;
        background: #333;
        position: absolute;
        left: 0;
        bottom: -12px;
      }
    }
  }

  .nav-column {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    padding: 19px;
    background: #ccc;

    li {
      font-size: 15px;
      padding: 7px 10px;
      color: #ff4495;
    }
  }
}

.logoBox {
  display: flex;
  align-items: center;

  & > img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }

  & > h1 {
    font-size: 18px;
    margin-right: 10px;
  }
}
</style>
